<template>
  <div class="formBox">
    <t-form :model="searchData" label-width="98">
      <t-row>
        <t-col>
          <t-form-item label="护理项目名称：" name="name">
            <t-input placeholder="请输入内容" v-model="searchData.name" class="form-item-content" type="search" clearable
              @clear="handleClear('name')" />
          </t-form-item>
        </t-col>
        <t-col>
          <t-form-item label="状态：" name="status">
            <t-select clearable v-model="searchData.status" placeholder="请输入内容" @clear="handleClear('status')">
              <t-option v-for="(item, index) in statusData" :key="index" :value="item.id" :label="item.value"
                title="" />
            </t-select>
          </t-form-item>
        </t-col>
        <t-col class="searchBtn">
          <button type="button" class="bt-grey wt-60" @click="handleReset()">重置</button>
          <button type="button" class="bt wt-60" @click="handleSearch()">搜索</button>
        </t-col>
      </t-row>
    </t-form>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
//引入状态枚举
import { statusData } from '@/utils/commonData'

//定义searchData对象
//const searchData =ref({})

//接收父组件传输过来的变量
const props = defineProps({
  searchData: {
    type: Object,
    default: () => { }
  }
})

//声明方法
const emits = defineEmits(['handleClear', 'handleReset', 'handleSearch'])
// 定义一个处理清除操作的函数
const handleClear = (val) => {
  // 当调用handleClear时，触发自定义事件'handleClear'，并传递当前的值val给父组件
  emits('handleClear', val)
}
/**
 * 重置方法
 * 该方法通过触发自定义事件'handleReset'来实现重置操作
 */
const handleReset = () => {
  emits('handleReset')
}
/**
 * 处理搜索事件
 * 当用户触发搜索时，此方法将被调用
 * 它通过自定义事件的方式通知父组件进行搜索操作
 */
const handleSearch = () => {
  emits('handleSearch')
}

</script>